<?php
/**
 * Created by PhpStorm.
 * User: luanalex
 * Date: 2017/9/18
 * Time: 11:31
 */

?>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html">
    <meta charset="UTF-8">
    <meta content="always" name="referrer">
    <meta name="theme-color" content="#2932e1">
    <link href="../home/style/163css.css" rel="stylesheet"/>
    <style type="text/css">
        body {
            display: block;
            align-items: flex-start;
            margin-top: 0px;
            margin-left: 0px;
            margin-right: 0px;
            background-color: aliceblue;
            width: 100%;
            height: 500px;
            link = "#ff0000" alink = "#ff0000" vlink = "#ff0000"
        }

    </style>
    <title>十里香</title>
</head>

<body>
<!--margin:0 auto;width:100%;height:100%;border:1px solid #F00-->
<div style="display: flex; justify-content: space-around;">
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;background-color: #2CB200;border: solid 1px #FFFFFF;">
        <div style="display: flex; flex-direction: row; align-items: flex-start;justify-content: space-between; width: 100%; margin-left: 0px;margin-right: 0px;border: solid 1px #FFFFFF;">
<!--            left_top-->
            <div style="display: flex; width: 99px; height: 99px; border: solid 1px #FFFFFF">11</div>
<!--            top_center-->
            <div style="display: flex; flex-direction: row; justify-content: space-around;flex-grow:1; border: solid 1px #FFFFFF">
                <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> shang 1 </div>
                <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> shang 2 </div>
                <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> shang 2 </div>
            </div>
<!--            right_top-->
            <div style="display: flex; width: 99px; height: 99px; border: solid 1px #FFFFFF">14</div>
        </div>
        <div style="display: flex; flex-direction: row;flex-grow:1; align-items: flex-start;justify-content: space-between;align-items: center; margin-top: 5px;margin-bottom: 5px; width: 100%;border: solid 1px #FFFFFF;">
<!--            left_center-->
            <div style="display: flex; flex-direction: column; width: 99px; justify-content: space-around;  border: solid 1px #FFFFFF">
                <div style="display: flex; flex-direction: column; justify-content: space-around;  flex-grow:1; border: solid 1px #FFFFFF">
                    <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> shang 1 </div>
                    <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> shang 2 </div>
                    <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> shang 2 </div>
                </div>
            </div>
            <div style="display:flex;flex-grow:1;align-self:stretch; margin-left:5px;margin-right:5px; margin-top:5px;margin-bottom:5px; border: solid 1px #FFFFFF; height: 100%">
                asdfasdfasdfasdf22<br>
                asdfasdfasdfasdf22<br>
                asdfasdfasdfasdf22<br>
                asdfasdfasdfasdf22<br>
                asdfasdfasdfasdf22<br>
                asdfasdfasdfasdf22<br>
                asdfasdfasdfasdf22<br>
                asdfasdfasdfasdf22<br>
                asdfasdfasdfasdf22<br>
                asdfasdfasdfasdf22<br>
            </div>
<!--            right_center-->
            <div style="display: flex; flex-direction: column; width: 99px; top: 0px; bottom: 0px; justify-content: space-around;  border: solid 1px #FFFFFF">
                <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> you zhong</div>
                <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> zuo zhong</div>
                <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> zuo zhong</div>
            </div>
        </div>

        <div style="display: flex; flex-direction: row; align-items: flex-start;justify-content: space-between; width: 100%;border: solid 1px #FFFFFF;">
<!--            bottom_left-->
            <div style="display: flex; width: 99px; height: 99px;margin-left: 0px;margin-right: 0px; border: solid 1px #FFFFFF">31</div>
<!--            bottom_center-->
            <div style="display: flex; flex-direction: row; justify-content: space-around; flex-grow:1; margin-left: 0px;margin-right:0px; height: 100%;width: 100% border: solid 1px #FF5555;overflow: hidden;">

                <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> xia 1 </div>
                <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> xia 2 </div>
                <div style="border: solid 1px #FFFFFF; width: 99px; height: 99px;"> xia 2 </div>
            </div>
<!--            bottom_right-->
            <div style="display: flex; width: 99px; height: 99px;margin-left: 0px;margin-right: 0px; border: solid 1px #FFFFFF">33</div>
        </div>

    </div>
</div>
</body>
</html>
